<template>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="类型"
    :label-width="6"
    :wrapper-width="16"
    :offset-width="2"
  >
    <s-select
      v-model="fakeType"
      placeholder="控件类型"
      :data="components"
      @change="$emit('typeChange', fakeType)"
    />
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="显示表达式"
    name="ifCondition"
    :label-width="6"
    :wrapper-width="16"
    :offset-width="2"
  >
    <s-input
      v-model="formValue.ifCondition"
      :disabled="disableKeys.includes('ifCondition')"
      placeholder="formValue.name=='测试'"
    />
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="名称"
    name="label"
    :label-width="6"
    :wrapper-width="16"
    :offset-width="2"
    :rules="[
      { whitespace: true, required: true, message: '不能为空' },
      { max: 50, message: '最长为50' }
    ]"
  >
    <a-auto-complete
      v-model:value="formValue.label"
      :disabled="disableKeys.includes('label')"
      placeholder="控件的名称"
      :filter-option="true"
      :options="keyOptions"
      @select="
        (value, option) => {
          ;(formValue.label = option.value), (formValue.key = option.label)
        }
      "
    >
      <template #option="{ value, label }"> {{ value }}({{ label }}) </template>
    </a-auto-complete>
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="键名"
    name="key"
    :label-width="6"
    :wrapper-width="16"
    :offset-width="2"
    :rules="[
      { whitespace: true, required: true, message: '不能为空' },
      { max: 50, message: '最长为50' },
      {
        pattern: /^[a-z](([a-z]|[A-Z]|[0-9]){1,})$/,
        message: '键名只能使用英文字母或数字，且以小写字母开头'
      }
    ]"
  >
    <s-input
      v-model="formValue.key"
      :disabled="disableKeys.includes('key')"
      placeholder="控件的键名"
    />
  </s-form-item>
</template>
<script>
import { components } from '../components/templateData'
export default {
  name: 'GeneralProperty',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    keyOptions: {
      required: false,
      type: Array,
      default: () => []
    },
    value: {
      required: false,
      type: Object,
      default: () => {}
    },
    disableKeys: {
      required: false,
      type: Array,
      default: () => {
        return []
      }
    },
    code: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  emits: ['typeChange'],
  data() {
    return { formValue: this.value.properties, components: components, fakeType: this.value.type }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.formValue = val.properties
        this.fakeType = this.value.type
      },
      deep: true
    }
  }
}
</script>
